import React from 'react';
import Reflux from 'reflux';
import * as ReactMixin from "react-mixin";
require('./YwhMember.less');
import Store from './Store';
import Actions from './Actions';

import {RECORD} from "../../../toupiao/const/Const"
import {
  Button, Icon, ImagePicker, InputItem, List, NavBar, Picker, Popover, TextareaItem,
  WhiteSpace, WingBlank
} from "antd-mobile";
import NoPhoto from '../../../../../assets/icon/vote/ywh/nophoto.png';
const { API_URL} = require(`./../../../../../config/${ENV}.json`);
const myImg = src => <img src={`https://gw.alipayobjects.com/zos/rmsportal/${src}.svg`} className="am-icon am-icon-xs" alt="" />;

class YwhMember extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      selected: '',
    };
    this.onSelect = this.onSelect.bind(this);
    this.handleVisibleChange = this.handleVisibleChange.bind(this);
    this.onImageClick = this.onImageClick.bind(this);
    this.onProprietorChange = this.onProprietorChange.bind(this);
    this.onJobChange = this.onJobChange.bind(this);
    this.onAppoint = this.onAppoint.bind(this);
  }

  componentWillMount() {
    Actions.onInit(this.props.params.cid, this.props.params.pid);
  }

  onSelect(opt) {
    // console.log(opt.props.value);
    this.setState({
      visible: false,
      selected: opt.props.value,
    });
  }

  handleVisibleChange(visible) {
    this.setState({
      visible,
    });
  }

  onProprietorChange(val) {
    Actions.getProprietorById(val);
  }

  onJobChange(val) {
    Actions.onJobChange(val);
  }

  onAppoint() {
    Actions.onAppoint();
  }

  onImageClick(index, fs) {

    let t = this;
    let pswpElement = document.querySelectorAll('.pswp')[0];

    // build items array
    let items = fs.map((file) => {
      let o = new Image();
      o.src = file.url;
      return {
        src: file.url,
        w: o.width,
        h: o.height
      };
    });

    let gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, {index: index});
    gallery.init();
  }

  render() {

    let proprietor = this.state.member.currentNomination;

    return (
      <div>
        <NavBar
          mode="dark"
          rightContent={
            <Popover
              mask
              overlayClassName="fortest"
              overlayStyle={{ color: 'currentColor' }}
              visible={this.state.visible}
              overlay={[
                (<Popover.Item key="4" value="任命" icon={myImg('tOtXhkIWzwotgGSeptou')} data-seed="logId">职务任命</Popover.Item>),
                (<Popover.Item key="5" value="删除" icon={myImg('PKAgAqZWJVNwKsAJSmXd')} style={{ whiteSpace: 'nowrap' }}>修改任命</Popover.Item>),
                (<Popover.Item key="6" value="改选" icon={myImg('uQIYTFeRrjPELImDRrPt')}>
                  <span style={{ marginRight: 5 }}>委员改选</span>
                </Popover.Item>),
              ]}
              align={{
                overflow: { adjustY: 0, adjustX: 0 },
                offset: [-10, 0],
              }}
              onVisibleChange={this.handleVisibleChange}
              onSelect={this.onSelect}
            >
              <div style={{
                height: '100%',
                padding: '0 15px',
                marginRight: '-15px',
                display: 'flex',
                alignItems: 'center',
              }}
              >
                <Icon type="ellipsis" />
              </div>
            </Popover>
          }
        >业委会人员详情</NavBar>
        <WhiteSpace/>
        <List>
          <Picker
            title="选择职务"
            cols="1"
            disabled={!this.state.member.isZr}
            value={proprietor.job ? [proprietor.job] : []}
            onChange={(val) => {this.onJobChange(val)}}
            data={this.state.member.jobs}>
            <List.Item arrow="horizontal">职务名称</List.Item>
          </Picker>
          <Picker
            title="选择人员"
            cols="1"
            disabled={!this.state.member.isZr}
            value={[proprietor.id]}
            onChange={(val) => {this.onProprietorChange(val)}}
            data={this.state.member.nominations}>
            <List.Item arrow="horizontal">姓名</List.Item>
          </Picker>
          <List.Item arrow="horizontal" extra={proprietor.phone}>手机号码</List.Item>
          <Picker
            title="选择学历"
            cols="1"
            disabled={true}
            value={[proprietor.record]}
            onChange={() => {console.log('')}}
            data={RECORD}>
            <List.Item arrow="horizontal">学历</List.Item>
          </Picker>
          <TextareaItem
            title="个人简介"
            editable={false}
            onChange={() => {console.log('')}}
            value={proprietor.synopsis}
            placeholder="这家伙很懒，什么都没留下。"
            count="140"
            rows="4"
            clear
          />
        </List>
        <WhiteSpace/>
        <List>
          <List.Item>
            照片
            <List.Item.Brief>
              <ImagePicker
                files={[{url: proprietor.imageUrl ? (API_URL + proprietor.imageUrl) : NoPhoto}]}
                onImageClick={(index, fs) => this.onImageClick(index, fs)}
                multiple={false}
                selectable={false}
              />
            </List.Item.Brief>
          </List.Item>
        </List>
        {
          this.state.member.isZr ?
            <div>
              <WhiteSpace/>
              <div className="bt-over">
                <WingBlank>
                  <Button type="primary" onClick={() => {this.onAppoint()}}>职务任命</Button>
                </WingBlank>
              </div>
              <WhiteSpace />
            </div>
            :
            null
        }
      </div>
    );
  }
}

ReactMixin.onClass(YwhMember, Reflux.connect(Store, 'member'));

export default YwhMember;
